<template>
  <template v-for="item in menus">
    <template v-if="isEmpty(item.children)">
      <el-menu-item :index="`${item.id}`" :key="item.id">
        <el-icon><i-ep-Document /></el-icon>
        <span>{{ item.name }}</span>
      </el-menu-item>
    </template>
    <template v-else>
      <el-sub-menu :index="`${item.id}`" :key="item.id">
        <template #title>
          <el-icon><i-ep-Menu /></el-icon>
          <span>{{ item.name }}</span>
        </template>
        <menu-item :menus="item.children"></menu-item>
      </el-sub-menu>
    </template>
  </template>
</template>

<script setup>
import { isEmpty } from '@/utils/index.js'
defineProps({
  menus: {
    type: Array,
    require: true
  }
})
</script>

<style lang="scss" scoped></style>
